<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="24">
				<el-card>
					<div id="main" style="width: 100%; height: 60vh"></div>
				</el-card>
			</el-col>
		</el-row>

		<el-row :gutter="20">
			<el-col>
				<h1>系统公告</h1>

				<div>
					<el-collapse accordion>
						<el-collapse-item v-for="item in notices" :title="item.name" :name="item.id">
							<div>{{ item.createTime }}</div>
							<div v-html="item.content"></div>
						</el-collapse-item>
					</el-collapse>
				</div>
			</el-col>
			<el-col>
				<Cache></Cache>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
import request from '@/utils/request'
import settings from '@/utils/settings'
import Cache from '@/views/monitor/cache/index.vue'
import * as echarts from 'echarts'
import { onBeforeMount, onMounted, reactive, ref } from 'vue'
// const systemStore = useSystemStore()
// 系统参数
const systemInformation = reactive({})
// 用户总数
const userSize = ref(0)
// 角色总数
const roleSize = ref(0)
// 权限（菜单）总数
const permissionSize = ref(0)
// 记录总数
const recordSize = ref(0)
// 公告内容
const noticeSize = ref(0)

const logSize = ref(0)
const fileSize = ref(0)
const notices = reactive({})
// 系统简介
const about = settings.about

onMounted(async () => {
	const renotices = await request.get(`notice`)
	Object.assign(notices, renotices.data)

	const chartDom = document.getElementById('main')
	const myChart = echarts.init(chartDom)
	let option
	const systemArray = []
	const res = await request.get('/user')
	userSize.value = res.data.length
	const rer = await request.get('/role')
	roleSize.value = rer.data.length
	const rep = await request.get('/permission')
	permissionSize.value = rep.data.length
	const red = await request.get('/record')
	recordSize.value = red.data.length
	const ren = await request.get('/notice')
	noticeSize.value = ren.data.length
	const reff = await request.get('/file')
	fileSize.value = reff.data.length

	systemArray.push({ name: '用户总数', value: userSize.value })
	systemArray.push({ name: '角色总数', value: roleSize.value })
	systemArray.push({ name: '权限总数', value: permissionSize.value })
	systemArray.push({ name: '构建总数', value: recordSize.value })
	systemArray.push({ name: '公告总数', value: noticeSize.value })
	systemArray.push({ name: '文件总数', value: fileSize.value })
	// option = {
	//   title: {
	//     text: '系统参数',
	//     subtext: 'from系统日志',
	//     left: 'center'
	//   },
	//   xAxis: {
	//     type: 'category',
	//     data: res.data.dates
	//   },
	//   yAxis: {
	//     type: 'value'
	//   },
	//   series: [
	//     {
	//       data: res.data.counts,
	//       type: 'line',
	//       smooth: true
	//     }
	//   ]
	// };
	option = {
		title: {
			text: '系统参数',

			left: 'left'
		},
		tooltip: {
			trigger: 'item'
		},
		legend: {
			top: '5%',
			left: 'center'
		},
		series: [
			{
				type: 'pie',
				radius: ['40%', '70%'],
				avoidLabelOverlap: false,
				itemStyle: {
					borderRadius: 10,
					borderColor: '#fff',
					borderWidth: 2
				},
				label: {
					show: false,
					position: 'center'
				},
				emphasis: {
					label: {
						show: true,
						fontSize: 40,
						fontWeight: 'bold'
					}
				},
				labelLine: {
					show: false
				},
				data: systemArray
			}
		]
	}

	option && myChart.setOption(option)

	option && myChart.setOption(option)
})
</script>

<style scoped lang="scss">
h1 {
	color: #333;
	font-size: 16px;
	font-weight: bolder;
	line-height: 50px;
}

p {
	color: #666;
	font-size: 16px;
	margin: 10px;
	line-height: 1.5; /* 设置行间距为1.5倍字体大小 */
}
.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.text {
	font-size: 14px;
}

.item {
	margin-bottom: 18px;
}

.box-card {
}
ul {
	list-style: none; /* 移除默认的列表符号 */
	margin: 0;
	padding: 0;
}

li {
	color: #666;
	font-size: 16px;
	line-height: 1.5; /* 设置行间距为1.5倍字体大小 */
	margin-left: 10px;
}
ul:not(:first-child) {
	margin-left: 40px; /* 后两个 ul 向左对齐 */
}

.statistic {
	text-align: center;
}
</style>
